<!--
 * @Author: wwssaabb
 * @Date: 2021-09-08 15:41:38
 * @LastEditTime: 2021-09-17 14:41:22
 * @FilePath: \gshop-client\src\components\Shops.vue
-->
<template>
  <div class="shops-item" @click="goDetail">
    <img :src="imgSrc" alt="" />
    <div class="center">
      <div class="head">
        <span class="brand" v-if="isBrand">品牌</span>
        <span class="title">{{ title }}</span>
      </div>
      <div class="middle">
        <Rate
          :allow-half="true"
          v-model="score"
          readonly
          size="11"
          color="#ff9900"
        />
        <span class="score">{{ score }}</span>
        <span class="month_sales">月售{{ month_sales }}单</span>
      </div>
      <div class="foot">
        <span>￥{{ dispatch_limit }}起送</span>/<span
          >配送费约￥{{ dispatch_number }}</span
        >
      </div>
    </div>
    <div class="right">
      <div class="tags">
        <Tag
          :plain="true"
          color="#ddd"
          text-color="#ddd"
          v-for="(tag, index) in tags"
          :key="index"
          >{{ tag }}</Tag
        >
      </div>
      <span class="take_out">{{ take_out }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import { useRouter } from "vue-router";
import { Rate, Tag } from "vant";
type tag = {
  id: Number;
  name: String;
};
type ShopInfo = {
  imgSrc: string;
  isBrand: boolean;
  title: string;
  score: number;
  month_sales: number;
  dispatch_limit: number;
  dispatch_number: number;
  tags: string[];
  take_out: string;
};
const info = defineProps({
  info: {
    type: Object as PropType<ShopInfo>,
    required: true,
  },
});
const {
  imgSrc,
  isBrand,
  title,
  score,
  month_sales,
  dispatch_limit,
  dispatch_number,
  tags,
  take_out,
} = info.info;
/* 
{
  imgSrc,
  isBrand,
  title,
  score,
  month_sales,
  dispatch_limit,
  dispatch_number,
  tags,
  take_out,
} 
*/
//router实例
const router = useRouter();
//goDetail跳转到商店详情页面
const goDetail = () => {
  router.push("/shop");
};
</script>

<style lang="scss" scoped>
.shops-item {
  width: 100%;
  padding: 10px;
  display: flex;
  justify-content: flex-start;
  align-self: start;
  font-size: 14px;
  font-family: "Microsoft YaHei";

  img {
    width: 20vw;
    height: 20vw;
    margin-right: 10px;
    object-fit: cover;
    border-radius: 5px;
  }
  .center {
    flex: 1;
    .head {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      .brand {
        font-size: 12px;
        font-family: "Microsoft YaHei";
        padding: 2px;
        color: #333;
        background-color: #ffd930;
        margin-right: 5px;
        border-radius: 2px;
      }
      .title {
        display: inline-block;
        width: calc(80vw - 125px);
        font-size: 14px;
        font-family: "Microsoft YaHei";
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
  .middle {
    color: #666;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .score {
      font-size: 11px;
      margin: 0 5px;
      color: #ff6000;
    }
    .month_sales {
      font-size: 11px;
    }
  }

  .foot {
    color: #bbb;
    span {
      color: #666;
      font-size: 11px;
      font-family: "Microsoft YaHei";
      &:first-child {
        margin-right: 5px;
      }
      &:last-child {
        margin-left: 5px;
      }
    }
  }

  .right {
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tags {
      color: #eee;
      margin-bottom: 10px;
      > span {
        padding: 0 2px;
        font-size: 11px;
        font-family: "Microsoft YaHei";
        border-radius: 2px;
        margin-right: 2px;
      }
    }
    & > span {
      padding: 0 2px;
      font-size: 11px;
      font-family: "SimHei";
      color: #02a774;
      border-radius: 3px;
      border: 0.5px solid #02a774;
    }
  }
}
</style>
